<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="720px" append-to-body>
        <el-table :data="model.track_info" border script style="width: 100%">
            <el-table-column label="物流商">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.track_info" value-key="value" placeholder="请选择物流公司" clearable filterable style="width: 100%">
                        <el-option v-for="item in dict.trackList" :key="item.value" :label="item.label" :value="item"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="运单号">
                <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.track_number" placeholder="请填写运单编号" clearable></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-plus" @click="addItem" v-if="scope.$index == 0"></el-button>
                    <el-button type="text" icon="el-icon-minus" @click="handleDelete(scope.row)" v-else></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialo2-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editTrackNumber, getTrackList } from '@/api/purchase'
export default {
    name: 'TrackInfoDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            model: {
                purchase_number: '',
                track_info: [],
            },
            rules: {
                // _物流公司: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
                // _运单编号: [{ required: true, message: '请填写运单编号', trigger: 'blur' }],
            },
            dict: {
                trackList: [],
            },
            save: false,
            loading: false,
        }
    },
    computed: {
        title() {
            return `新增物流信息`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {},

    async mounted() {
        this.loading = true
        try {
            const purchaserData = await getTrackList()
            this.dict.trackList = purchaserData.data ?? []
        } catch (error) {
            console.log(error)
        }
        this.loading = false
        this.model.purchase_number = this.params.purchase_number
        this.model.track_info = this.params.track_info.map(item => {
            item.track_info = {
                label: item.track_name,
                value: item.track_id,
            }
            return { ...item }
        })
    },
    methods: {
        addItem() {
            this.model.track_info.push({
                track_id: '',
                track_name: '',
                track_number: '',
                track_info: {}
            })
        },
        handleDelete(row) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.model.track_info = this.model.track_info.filter(item => item.track_number !== row.track_number)
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        submit() {
            if (this.model.track_info.length == 0) {
                return this.$message.error('请添加物流信息')
            }
            this.save = true
            const params = { ...this.model }
            params.track_info = params.track_info.map(item => {
                return { 
                    track_id: item.track_info.value,
                    track_name: item.track_info.label,
                    track_number: item.track_number,
                }
            })
            editTrackNumber(params)
                .then(() => {
                    this.$message.success('操作成功')
                    this.$emit('success', true)
                    this.cancel()
                })
                .finally(() => {
                    this.save = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.color-list {
    display: flex;
    align-items: center;
    height: 36px;
}
.color-item {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #fff;
}
</style>
